<template>
  <header class="site-header">
    <!-- 主导航 -->
    <div class="main-nav">
      <div class="nav-inner">
        <!-- Logo -->
        <router-link to="/" class="logo">
          <i class="fa fa-coffee"></i>
          <span>中国云咖</span>
        </router-link>

        <!-- 搜索框（桌面端：拆分为咖啡+周边两个搜索栏） -->
        <div class="search-container">
          <!-- 咖啡搜索栏 -->
          <div class="search-box coffee-search">
            <span class="search-label">咖啡</span>
            <input
              type="text"
              placeholder="搜索咖啡豆、产地或风味..."
              v-model="coffeeKeyword"
              @keyup.enter="handleCoffeeSearch"
            />
            <i class="fa fa-search" @click="handleCoffeeSearch"></i>
          </div>
          <!-- 周边商品搜索栏 -->
          <div class="search-box merchandise-search">
            <span class="search-label">周边</span>
            <input
                    type="text"
                    placeholder="搜索杯子、器具等周边..."
                    v-model="merchandiseKeyword"
                    @keyup.enter="handleMerchandiseSearch"
            />
            <i class="fa fa-search" @click="handleMerchandiseSearch"></i>
          </div>
        </div>

        <!-- 图标区 -->
        <div class="icons">
          <router-link to="/cart" class="icon-btn">
            <i class="fa fa-shopping-cart"></i>
            <span class="badge">{{ cartCount }}</span>
          </router-link>
          <router-link to="/user-center" class="icon-btn">
            <i class="fa fa-user"></i>
          </router-link>
          <!-- 退出登录按钮 -->
          <button class="icon-btn" @click="handleLogout" title="退出登录">
            <i class="fa fa-sign-out-alt"></i>
          </button>
        </div>

        <!-- 汉堡按钮（移动端） -->
        <button class="hamburger" @click="toggleMenu">
          <i class="fa fa-bars"></i>
        </button>
      </div>

      <!-- 桌面端主导航菜单 -->
      <nav class="desktop-menu">
        <router-link to="/user-index" :class="{ active: $route.path === '/user-index' }">首页</router-link>
        <router-link to="/all-coffees" :class="{ active: $route.path === '/all-coffees' }">全部咖啡豆</router-link>
        <router-link to="/coffee-origin" :class="{ active: $route.path === '/coffee-origin' }">咖啡分类</router-link>
        <router-link to="/merchandise" :class="{ active: $route.path === '/merchandise' }">咖啡周边</router-link>
        <router-link to="/about" :class="{ active: $route.name === 'About' }">关于我们</router-link>
      </nav>

      <!-- 移动端菜单（新增移动端搜索栏） -->
      <transition name="slide">
        <div v-show="mobileMenuOpen" class="mobile-menu">
          <!-- 移动端搜索区 -->
          <div class="mobile-search-container">
            <!-- 咖啡搜索 -->
            <div class="search-box coffee-search">
              <input
                type="text"
                placeholder="搜索咖啡豆..."
                v-model="coffeeKeyword"
                @keyup.enter="handleCoffeeSearch()"
              />
              <i class="fa fa-search" @click="handleCoffeeSearch()"></i>
            </div>
            <!-- 周边搜索 -->
            <div class="search-box merchandise-search">
              <input
                type="text"
                placeholder="搜索周边商品..."
                v-model="merchandiseKeyword"
                @keyup.enter="handleMerchandiseSearch()"
              />
              <i class="fa fa-search" @click="handleMerchandiseSearch()"></i>
            </div>
          </div>
          <!-- 移动端菜单列表 -->
          <router-link to="/user-index" @click="closeMobileMenu">首页</router-link>
          <router-link to="/all-coffees" @click="closeMobileMenu">全部咖啡豆</router-link>
          <router-link to="/coffee-origin" @click="closeMobileMenu">咖啡分类</router-link>
          <router-link to="/merchandise" @click="closeMobileMenu">咖啡周边</router-link>
          <router-link to="/about" @click="closeMobileMenu">关于我们</router-link>
        </div>
      </transition>
    </div>
  </header>
</template>

<script>
export default {
  name: 'SiteHeader',
  data() {
    return {
      mobileMenuOpen: false,
      cartCount: 0,
      // 桌面端搜索关键词
      coffeeKeyword: '',
      merchandiseKeyword: '',
      // 移动端搜索关键词
      mobileCoffeeKeyword: '',
      mobileMerchandiseKeyword: ''
    }
  },
  created() {
    this.getCarNum()
  },
  methods: {
    getCarNum(){
      this.$axios.get('/cart/my/count').then(res=>{
        this.cartCount = res.data.total_quantity
      })
    },
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    },
    closeMobileMenu() {
      this.mobileMenuOpen = false // 点击移动端菜单后关闭菜单
    },
    // 咖啡搜索触发（isMobile区分是否为移动端，用于获取对应关键词）
    handleCoffeeSearch() {
      const keyword = this.coffeeKeyword.trim()
      if (!keyword) {
        this.$message.warning('请输入咖啡相关搜索关键词')
        return
      }
      // 跳转咖啡搜索结果页，携带关键词参数
      this.$router.push({
        path: '/coffee-search-result',
        query: { keyword, page: 1, limit: 10 } // 默认第一页，每页10条
      })
      // 清空搜索框（移动端需额外清空）
      this.coffeeKeyword = ''

      this.mobileCoffeeKeyword = ''
      this.closeMobileMenu()

    },
    // 周边商品搜索触发
    handleMerchandiseSearch(isMobile = false) {
  const keyword = this.merchandiseKeyword.trim();

  console.log("=== Header发起周边搜索 ===")
  console.log("关键词:", keyword)

  if (!keyword) {
    this.$message.warning('请输入周边商品相关搜索关键词');
    return;
  }

  // 跳转时传递参数：page和limit为数字，is_active为字符串
  this.$router.push({
    path: '/merchandise-search-result',
    query: {
      keyword: keyword,
      page: 1,  // 数字类型
      limit: 10, // 数字类型
      is_active: "true" // 字符串格式布尔值
    }
  });

  // 清空搜索框
  this.merchandiseKeyword = '';
  if (isMobile) {
    this.mobileMerchandiseKeyword = '';
    this.closeMobileMenu();
  }
},
    // 退出登录（整合原逻辑，避免重复）
    async handleLogout() {
      try {
        await this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        localStorage.removeItem('token')
        this.$store.commit('CLEAR_PROFILE')
        this.$router.replace('/login')
      } catch (_) {
        /* 用户取消 */
      }
    }
  }
}
</script>

<style scoped>
/* ====== 顶部导航样式 ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 主导航内层容器 */
.main-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}

/* Logo样式 */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #8B5A2B; /* 主色调，与你的商品管理页一致 */
}

/* 桌面端搜索容器（容纳两个搜索栏） */
.search-container {
  display: flex;
  gap: 16px;
  flex: 1;
  max-width: 600px;
  margin: 0 24px;
}

/* 搜索栏通用样式 */
.search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 搜索栏标签（咖啡/周边） */
.search-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #888;
  z-index: 1;
}

/* 搜索输入框 */
.search-box input {
  width: 100%;
  padding: 8px 36px 8px 36px; /* 左侧留空间放标签 */
  border-radius: 20px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* 搜索图标 */
.search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8B5A2B;
  cursor: pointer;
}

/* 图标区样式 */
.icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.icon-btn {
  position: relative;
  font-size: 20px;
  color: #333;
}

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #4ade80;
  color: #fff;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* 汉堡按钮（移动端） */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #333;
}

/* 桌面端菜单 */
.desktop-menu {
  display: flex;
  gap: 32px;
  justify-content: center;
  background: #8B5A2B; /* 主色调 */
  padding: 10px 0;
}

.desktop-menu a {
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  transition: background 0.3s;
}

.desktop-menu a.active,
.desktop-menu a:hover {
  background: #6d4418; /* 深色版主色调 */
}

/* 移动端菜单 */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
}

/* 移动端搜索容器 */
.mobile-search-container {
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 移动端菜单项 */
.mobile-menu a {
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  color: #333;
}

/* 菜单滑动动画 */
.slide-enter-active,
.slide-leave-active {
  transition: max-height 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
}

/* 响应式适配（移动端隐藏桌面搜索栏，显示汉堡按钮） */
@media (max-width: 768px) {
  .search-container,
  .desktop-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .mobile-menu {
    display: flex;
  }
  /* 移动端搜索栏调整 */
  .mobile-search-container .search-box input {
    padding: 8px 36px 8px 32px;
  }
  .mobile-search-container .search-label {
    font-size: 11px;
    left: 10px;
  }
}
</style>